<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.css">
	<title>Document</title>
	<style>
		#mytable {
			width: 1000px;
			margin: auto;
		}

		th,
		td {
			text-align: center;
		}

		.addbtn {
			margin: 30px 0;
		}
	</style>
</head>
<!-- 今日任务   通过数据渲染表格  对表格内容增删改查 -->
<!-- Standard button -->


<div id="mytable">
	<button type="button" class="btn btn-info addbtn" data-toggle="modal" data-target="#addStu">添加学生</button>
	<div class="table-responsive">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>学生id</th>
					<th>学生姓名</th>
					<th>学生年龄</th>
					<th>学生联系方式</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="studentTable">

			</tbody>
		</table>
		<nav style="text-align: center;" aria-label="Page navigation">
			<ul class="pagination">
				<li id="prev" onclick="prevPage()">
					<a href="#" aria-label="Previous">
						<span aria-hidden="true">&laquo;</span>
					</a>
				</li>


				<li id="next" onclick="nextPage()">
					<a href="#" aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
					</a>
				</li>
			</ul>
		</nav>
	</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="exampleModalLabel">修改学生信息</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="stuId" class="control-label">学号:</label>
						<input type="text" class="form-control" disabled id="stuId">
					</div>
					<div class="form-group">
						<label for="stuName" class="control-label">学生姓名:</label>
						<input type="text" class="form-control" id="stuName">
					</div>
					<div class="form-group">
						<label for="stuAge" class="control-label">学生年龄:</label>
						<input type="text" class="form-control" id="stuAge">
					</div>
					<div class="form-group">
						<label for="stuPhone" class="control-label">学生联系方式:</label>
						<input type="text" class="form-control" id="stuPhone">
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" onclick="changeStu()">确认修改</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="addStu" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="exampleModalLabel">添加学生信息</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="stuId" class="control-label">学号:</label>
						<input type="text" class="form-control" disabled id="addStuId">
					</div>
					<div class="form-group">
						<label for="stuName" class="control-label">学生姓名:</label>
						<input type="text" class="form-control" id="addStuName">
					</div>
					<div class="form-group">
						<label for="stuAge" class="control-label">学生年龄:</label>
						<input type="text" class="form-control" id="addStuAge">
					</div>
					<div class="form-group">
						<label for="stuPhone" class="control-label">学生联系方式:</label>
						<input type="text" class="form-control" id="addStuPhone">
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" onclick="addStudent()">确认添加</button>
			</div>
		</div>
	</div>
</div>

<body>
	<script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
	<script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
	<script>
		// 模拟一个数据源  真实情况这个数据源应该是后端响应给我的  json数据结构  后端返回给我们的数据结构基本上都是json数据
		// 要利用这个json数据  将对应的数据渲染在页面上
		var student = [{
			id: 1,
			name: '张三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 2,
			name: '李四',
			age: 18,
			phone: 1979797977
		},
		{
			id: 3,
			name: '王五',
			age: 18,
			phone: 1979797977
		},
		{
			id: 4,
			name: '赵六',
			age: 18,
			phone: 1979797977
		},
		{
			id: 5,
			name: '张三丰',
			age: 18,
			phone: 1979797977
		},
		{
			id: 6,
			name: '李师傅',
			age: 18,
			phone: 1979797977
		},
		{
			id: 7,
			name: '赵二娃',
			age: 18,
			phone: 1979797977
		},
		{
			id: 8,
			name: '张二狗',
			age: 18,
			phone: 1979797977
		},
		{
			id: 9,
			name: '李狗蛋',
			age: 18,
			phone: 1979797977
		},
		{
			id: 10,
			name: '王二娃',
			age: 18,
			phone: 1979797977
		},
		{
			id: 11,
			name: '王三娃',
			age: 18,
			phone: 1979797977
		},
		{
			id: 12,
			name: '李全单',
			age: 18,
			phone: 1979797977
		},
		{
			id: 13,
			name: '赵半蛋',
			age: 18,
			phone: 1979797977
		},
		{
			id: 14,
			name: '钱三多',
			age: 18,
			phone: 1979797977
		},
		{
			id: 15,
			name: '钱多多',
			age: 18,
			phone: 1979797977
		},
		{
			id: 16,
			name: '赵三三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 17,
			name: '赵1三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 18,
			name: '赵2三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 19,
			name: '赵3三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 20,
			name: '赵4三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 21,
			name: '赵5三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 22,
			name: '赵6三',
			age: 18,
			phone: 1979797977
		},
		{
			id: 23,
			name: '赵7三',
			age: 18,
			phone: 1979797977
		},
		]
		// 一共有23条数据 每一页显示3条数据 应该有多少页  第一页 0~2 第一页 3-5条 第二页 6-8条 第三页
		// 起始下标?? 结束下标 起始下标+3    0--1 3--2 6--3   (页码-1)*3

		var maxPage = 0
		var dangqianyeNum = 1
		showYema()
		showTbale(dangqianyeNum)

		// 控制哪些数据应该渲染到表格上
		function showTbale(dangqianye) {
			// 专门用来渲染页面
			// let data = student数组的截取(根据当前页来截取的)
			let qishi = (dangqianye - 1) * 3
			let data = student.slice(qishi, qishi + 3)
			$('#studentTable').html('')
			for (var i = 0; i < data.length; i++) {
				$('#studentTable').append(`<tr>
          <td>${data[i].id}</td>
          <td>${data[i].name}</td>
          <td>${data[i].age}</td>
          <td>${data[i].phone}</td>
          <td>
   
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" 
            data-id="${data[i].id}"
            data-name="${data[i].name}"
            data-age="${data[i].age}"
            data-phone="${data[i].phone}"
            >修改</button>
            <button onclick="delRow(${data[i].id})" type="button" class="btn btn-danger">删除</button>
          </td>
        </tr>`)
			}
			$('.pages').eq(dangqianye - 1).addClass('active').siblings().removeClass('active')
		}
		// 控制页码应该如何渲染
		function showYema() {
			$('.pages').remove()
			maxPage = Math.ceil(student.length / 3)
			for (var i = 1; i <= maxPage; i++) {
				$('#next').before(`
        <li class='pages' onclick='changeYema(this)'><a href="#">${i}</a></li>
      `)
			}
			$('.pages').eq(dangqianyeNum - 1).addClass('active').siblings().removeClass('active')
		}
		// 当前页的页码的改变
		function changeYema(obj) {
			// 这里我想干什么  对应的数据渲染在table里面
			// 根据分析 showTbale(dangqianyeNum) 我如何知道点了第几页  
			// console.log($(obj).children().text()) //拿到点击的页码
			dangqianyeNum = parseInt($(obj).children().text())
			showTbale(dangqianyeNum)
		}

		function prevPage() {
			if (dangqianyeNum > 1) {
				dangqianyeNum = dangqianyeNum - 1
				showTbale(dangqianyeNum)
			}


		}

		function nextPage() {
			if (dangqianyeNum < maxPage) {
				dangqianyeNum = dangqianyeNum + 1
				showTbale(dangqianyeNum)
			}
		}

		function delRow(id) {
			// 1.要删除数据  通过id去找到这个数据
			// 2.删除dom节点(tr这个标签里面的所有东西)   用了一个其他方法   就是模拟去点击当前页的按钮 执行点击的函数  从而重新渲染html结构
			// 要做到以上步骤  我们这个方法需要知道我应该删除谁
			console.log(id)
			for (var i = 0; i < student.length; i++) {
				if (student[i].id == id) {
					student.splice(i, 1)
				}
			}
			console.log(student)
			showTbale(dangqianyeNum)
			showYema()
		}

		// 修改的功能
		// 1.先点击btn按钮  弹框显示  将这行的数据显示在弹框的表单中
		// 2.修改弹框的表单内容  点击确认修改 先获取表单修改后的内容 根据修改内容将源数据改变 重新渲染表格dom
		$('#exampleModal').on('show.bs.modal', function (event) {
			//在这个函数里面讲这行的数据渲染在表单元素里面

			var button = $(event.relatedTarget)
			var id = button.data('id')
			var name = button.data('name')
			var age = button.data('age')
			var phone = button.data('phone')
			//做到现在我已经知道如何修改input的值
			var modal = $(this)
			modal.find('.modal-body #stuId').val(id)
			modal.find('.modal-body #stuName').val(name)
			modal.find('.modal-body #stuAge').val(age)
			modal.find('.modal-body #stuPhone').val(phone)
		})

		function changeStu() {
			// 1.拿到修改表单的内容  
			var id = $('#stuId').val()
			var name = $('#stuName').val()
			var age = $('#stuAge').val()
			var phone = $('#stuPhone').val()
			console.log(id, name, age, phone)
			var newStu = {
				id: id,
				name: name,
				age: age,
				phone: phone
			}
			// 2.根据修改的内容 修改数据源 
			for (var i = 0; i < student.length; i++) {
				if (id == student[i].id) {
					student.splice(i, 1, newStu)
				}
			}
			// 3.弹框消失
			$('#exampleModal').modal('hide')
			// 4.表格dom重新渲染
			showTbale(dangqianyeNum)
		}

		$('#addStu').on('show.bs.modal', function (event) {
			//在这个函数里面讲这行的数据渲染在表单元素里面
			var id = parseInt(Math.random() * 1000000)
			var modal = $(this)
			modal.find('.modal-body #addStuId').val(id)
			modal.find('.modal-body #addStuName').val("")
			modal.find('.modal-body #addStuAge').val("")
			modal.find('.modal-body #addStuPhone').val("")

		})

		function addStudent() {
			console.log(123123)
			var id = $('#addStuId').val()
			var name = $('#addStuName').val()
			var age = $('#addStuAge').val()
			var phone = $('#addStuPhone').val()
			console.log(id, name)
			var newStu = {
				id: id,
				name: name,
				age: age,
				phone: phone
			}
			console.log(newStu)
			student.push(newStu)
			$('#addStu').modal('hide')
			showTbale(dangqianyeNum)
			showYema()

		}
	</script>
</body>

</html>